<template>
	<view class="history">
		<view class="head">
			<view class="left">
				<picker mode="date" :value="yearMonth" :end="endDate" fields="month" @change="bindDateChange">
					<view class="date">{{ nowYear }}年{{ nowMonth }}月</view>
				</picker>
				<uni-icons type="bottom" size="14" color="#111"></uni-icons>
			</view>
			<view class="right">
				<view class="item">充值：¥{{ consumeTotal.chargeAmount || 0 }}元</view>
				<view class="item">支出：¥{{ consumeTotal.payAmount || 0 }}元</view>
				<view class="item">节省：¥{{ consumeTotal.discountAmount || 0 }}元</view>
			</view>
		</view>
		<view class="list">
			<template v-if="list && list.length > 0">
				<view class="item" v-for="(item, index) in list" :key="index">
					<view class="left">
						<image class="icon" :src="item.logo" mode="aspectFit"></image>
					</view>
					<view class="right">
						<view class="info">
							<view class="title">{{ item.title }}</view>
							<view class="desc" v-if="item.linkModule === 1">{{ item.remark }}</view>
							<view class="time">
								<image class="icon-time" src="@/static/images/index/icon-time@2x.png" mode="aspectFit"></image>
								<view>{{ item.createTime }}</view>
							</view>
						</view>
						<view class="price">
							<view class="payment" :class="{ add: item.changeType === 0 }">{{ item.changeType === 0 ? '+' : '-' }}{{ item.changeAmount }}元</view>
							<view class="discount" v-if="item.giftAmount > 0">赠送{{ item.giftAmount }}元</view>
							<view class="discount" v-if="item.linkModule === 1">优惠{{ item.discountAmount }}元</view>
						</view>
					</view>
				</view>
			</template>
			<template v-else>
				<div
					v-if="!isloading"
					class="no-data"
					style="display: flex; justify-content: center; align-items: center; flex-direction: column; padding-top: 180rpx; padding-bottom: 180rpx"
				>
					<image style="width: 444rpx; height: 288rpx" src="@/static/images/mine/no-data@2x.png" mode="aspectFit"></image>
					<div style="font-size: 36rpx; color: #999; padding-top: 60rpx" class="text">暂无数据</div>
				</div>
			</template>
		</view>
	</view>
</template>

<script>
import { memberSearchConsumeList } from '@/api/member.js';

export default {
	data() {
		return {
			nowYear: '',
			nowMonth: '',
			nowDate: '',
			endDate: '',
			yearMonth: '',
			yearMonthDate: '',
			list: [],
			consumeTotal: {},
			isloading: false,
			total: 0,
			pages: {
				start: 1,
				limits: 10
			}
		};
	},
	onShow() {
		this.list = [];
		this.isloading = false;
		this.total = 0;
		this.pages = {
			start: 1,
			limits: 10
		};
		this.getNowYearMonth();
		this.getMemberSearchConsumeList();
	},
	onReachBottom() {
		if (this.pages.start * this.pages.limits >= this.total) return this.$modal.msg('数据加载完毕!');

		if (this.isloading) return;

		// 让页码值自增+1
		this.pages.start++;
		this.getMemberSearchConsumeList();
	},
	// 下拉刷新
	onPullDownRefresh() {
		this.list = [];
		this.isloading = true;
		this.total = 0;
		this.pages = {
			start: 1,
			limits: 10
		};
		this.getNowYearMonth();
		this.getMemberSearchConsumeList();

		this.$nextTick(() => {
			setTimeout(() => {
				uni.stopPullDownRefresh();
				this.isloading = false;
			}, 500);
		});
	},
	methods: {
		getNowYearMonth() {
			const _date = new Date();
			this.nowYear = _date.getFullYear();
			this.nowMonth = _date.getMonth() + 1;
			this.nowDate = _date.getDate();
			this.yearMonth = this.nowYear + '-' + this.nowMonth + '-' + this.nowDate;
			this.endDate = this.nowYear + '-' + this.nowMonth + '-' + this.nowDate;
		},
		getMemberSearchConsumeList() {
			const _date = new Date();
			const month = _date.getMonth() + 1;
			const _month = month < 10 ? '0' + month : month;
			const data = {
				yearMonth: this.yearMonthDate ? this.yearMonthDate : _date.getFullYear().toString() + '' + _month.toString(),
				...this.pages
			};
			memberSearchConsumeList(data).then((res) => {
				this.consumeTotal = res.appendData.consumeTotal;

				this.total = res.total;
				this.list = res.rows ? this.list.concat(res.rows) : [];
				this.isloading = false;
			});
		},
		bindDateChange(opt) {
			this.list = [];
			this.isloading = false;
			this.total = 0;
			this.pages = {
				start: 1,
				limits: 10
			};

			this.yearMonth = `${opt.detail.value}-01`;
			const YM = opt.detail.value.split('-');
			this.yearMonthDate = YM.join('');
			this.nowYear = YM[0];
			this.nowMonth = YM[1];
			this.getMemberSearchConsumeList();
		}
	}
};
</script>

<style lang="scss" scoped>
.history {
	.head {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 24rpx;
		background: #f8f8f8;

		.left {
			display: flex;
			align-items: center;

			.date {
				margin-right: 6rpx;
				font-size: 32rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 600;
				color: #111111;
				line-height: 1;
			}

			/deep/ .uni-icons {
				font-weight: 600;
			}
		}

		.right {
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
		}
	}

	.list {
		padding: 24rpx;
		width: 100%;
		background: #ffffff;
		box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(238, 238, 238, 0.5);
		border-radius: 24rpx 24rpx 0rpx 0rpx;
		box-sizing: border-box;

		.item {
			display: flex;
			align-items: center;

			.left {
				display: flex;
				margin-right: 16rpx;
				min-width: 76rpx;
				height: 76rpx;

				.icon {
					width: 76rpx;
					height: 76rpx;
				}
			}

			.right {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 32rpx 0;
				border-bottom: 2rpx solid #eeeeee;

				.info {
					.title {
						margin-bottom: 12rpx;
						font-size: 32rpx;
						font-family: PingFang-SC-Bold, PingFang-SC;
						font-weight: bold;
						color: #111111;
						line-height: 1;
					}

					.desc {
						margin: 0 0 12rpx;
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
						line-height: 1;
					}

					.time {
						display: flex;
						align-items: center;
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
						line-height: 1;

						.icon-time {
							margin-right: 8rpx;
							width: 24rpx;
							height: 24rpx;
						}
					}
				}

				.price {
					display: flex;
					justify-content: center;
					align-items: flex-end;
					flex-direction: column;
					min-width: 240rpx;

					.payment {
						margin-bottom: 8rpx;
						font-size: 36rpx;
						font-family: PingFang-SC-Bold, PingFang-SC;
						font-weight: bold;
						color: #41bd4a;
						line-height: 1;
						text-align: right;

						&.add {
							color: #ff4b44;
						}
					}

					.discount {
						margin-top: 8rpx;
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #ff4b44;
						line-height: 1;
						text-align: right;
					}
				}
			}
		}
	}
}
</style>
